<template>
  <div>
    <h1>请上传头像</h1>
    <el-upload
      :action="uploadActionUrl"
      multiple
      accept="image/jpeg,image/gif,image/png"
      :limit="1"
      list-type="picture"
      :on-change="onChange"
      :show-file-list="false"
      :before-upload="isokUserid"
    >
      <el-button slot="trigger" size="small" type="primary">选取</el-button>
      <el-button
        style="margin-left: 10px"
        size="small"
        type="success"
        :auto-upload="true"
        @click="gogogo"
        >上传</el-button
      >
      <div slot="tip" class="el-upload__tip">请上传图片格式文件</div>
    </el-upload>
  </div>
</template>

<script>
import { GetUserHeadPicture } from '../api/home'
export default {
  data () {
    return {
      UserId: "",
      uploadActionUrl: `http://localhost:5000/HeadPortrait/${this.$route.params.key}`,
    }
  },
  mounted () {
    this.log();
  },
  methods: {
    gogogo () {
      console.log("上传成功");
      this.$message.success('头像上传成功')
    },
    isokUserid () {
      if (this.$route.params.key == undefined) {
        alert("请先注册")
        return false;
      }
      return true;

    },
    log () {
      this.UserId = this.$route.params.key;
      console.log(this.UserId);
    },
    onChange (file) {
      const isIMAGE = file.type == 'image/png' || 'image/gif' || 'image/jpeg';
      const isSize = file.size / 1024 / 1024 < 2;
      if (!isIMAGE) {
        this.$message.error('上传文件只能为png,gif,jpeg形式的，请重新上传');
        return false
      }
      if (!isSize) {
        this.$message.error('上传文件大小需要小于2m，请确认后重试');
        return false
      }

      var reader = new FileReader();
      reader.readAsDataURL(file.raw);
      reader.onload = function (e) {
        console.log(this.result)//图片的base64数据
      }
    },
  }
}
</script>


<style scoped>
</style>